<template>
    <div>
        <div class="container main">
            <div class="m-page">
                <div class="m-steps">
                    <steps :step="step"></steps>
                </div>
                <div class="m-message">
                    <span class="m-data">提单人：登录账号</span> 
                    <span class="m-data">提交时间：2019-04-19</span>
                </div>
                <div class="m-serviceInfo">
                    <div class="s-title">
                        <div class="title-text">服务信息</div>
                        <div class="title-tip">您选择购买如下企业服务，请确认服务内容以及价格</div>
                    </div>
                    <div class="s-order">
                        <table>
                            <tr>
                                <th>订单号</th>
                                <th>供应商</th>
                                <th>商品/服务详情</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>实付金额</th>
                            </tr>
                            <tr>
                                <td>FW201904190001</td>
                                <td>熙重电子科技有限公司</td>
                                <td>名称：创新政策咨询服务 地区：火炬湖里园区 服务性质：一次性服务</td>
                                <td>￥0.01</td>
                                <td>
                                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                                </td>
                                <td>￥0.01</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="m-leave">
                    <div class="l-title">给服务商留言</div>
                    <div class="l-input">
                        <textarea name="" id="" cols="30" rows="10" placeholder="我的留言"></textarea>
                    </div>
                    <div class="l-agree">
                        <div class="agree-left">
                            <el-checkbox v-model="checked">同意《XXXXX》</el-checkbox>
                        </div>
                        <div class="agree-right">
                            <span class="r-text">应付总额：</span>
                            <span class="r-price">
                                <span>0.01</span>元
                            </span>
                        </div>
                    </div>
                </div>
                <div class="m-btns">
                    <span><button class="back" @click="go_back()">返回</button></span>
                    <span><button class="sure" @click="sure_order()">确认订单</button></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import steps from '../../views/supermarket/Steps';
import headlogin from '../../views/localPage/headlogin';
export default {
    data(){
        return{
            cur: 1,//导航栏的默认光标
            Navigation:false,//服务分类的隐藏显示
            navD: [
                { id: 1, zt: "首页" },
                { id: 2, zt: "采集中心" },
                { id: 3, zt: "服务机构" },
                { id: 4, zt: "服务顾问" },
                { id: 5, zt: "关于我们" }
            ],
            step:0,//步骤
            num: 1,//数量
            checked:false,//同意true  不同意false
        }
    },
    methods:{
        // 导航栏
        getItme: function(item, index) {
            this.cur = index;
            switch(index)
            {
                case 0:
            
                this.$router.push({ path:'/ServiceSupermarket/Home'})
                break;
                case 1:
        
                this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                break;
                case 2:
            
                this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                break;
                case 3:
                
                this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                break;
                case 4:
                
                this.$router.push({ path:'/ServiceSupermarket/About'})
                break;
            }
        },
        //数量改变
        handleChange(value) {
            console.log(value);
        },
        sure_order(){//点击确认订单
            if(this.checked){
                this.$router.push({path:'/ServiceSupermarket/SubmitSuccess'})
            }
        },
        go_back(){//返回
            this.$router.go(-1);
        }
    },
    components:{
        steps,
        headlogin
    }
}
</script>
<style lang="less" scoped>
.m-page{
    background: #F3F3F3;
    padding: 60px 20px 100px;
    color: #333333;
    font-family:MicrosoftYaHei;
    font-weight:400;
    .m-message{
        margin-top: 50px;
        .m-data{
            margin-left: 80px;
            color: #666666;
            font-size: 16px;
        }
    }
    .m-serviceInfo{
        // background: #fff;
        margin-top: 60px;
        padding-bottom: 60px;
        .s-title{
            padding: 30px 44px;
            .title-text{
                font-size: 20px;
            }
            .title-tip{
                font-size: 16px;
                color: #666;
                margin-top: 30px;
            }
        }
        .s-order{
            &>table{
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: #666666;
                border-bottom: 1px #E0E0E0 solid;
                tr{
                    th{
                        height: 64px;
                    }
                    td{
                        padding: 30px 15px;
                    }
                    &:first-child{
                        background: #E0E0E0;
                        
                    }
                }
            }
        }
    }
    .m-leave{
        .l-title{
            font-size: 16px;
            color: #666;
        }
        .l-input{
            background: #fff;
            margin-top: 20px;
            height: 200px;
            textarea{
                width: 100%;
                height: 100%;
                border: none;
                padding: 20px 30px;
            }
        }
        .l-agree{
            padding: 0 30px;
            margin-top: 20px;
            .agree-left{
                float: left;
            }
            .agree-right{
                float: right;
                color: #666;
                font-size: 16px;
                .r-price{
                    &>span{
                        color: #E60012;
                        font-size: 24px;
                    }
                }
            }
        }
    }
    .m-btns{
        text-align: right;
        margin-top: 180px;
        &>span{
            margin-right:80px;
            button{
                height: 32px;
                width: 120px;
                text-align: center;
                font-size: 16px;
                border-radius: 4px;
                border: none;
                &.back{
                    border:1px solid #1575F9;
                    background: #fff;
                }
                &.sure{
                    background:linear-gradient(0deg,rgba(255,153,0,1),rgba(255,153,0,1));
                    color: #fff;
                }
            }
        }
    }
}
</style>
